<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>心语签下载页面</title>
    <link rel="stylesheet" href="./lib/Noto Serif SC.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.15/dist/base.min.css">
</head>
<style>
    :root {
        font-size: 16px;
    }

    html,
    body {
        height: 100%;
        width: 100%;
        background-color: aliceblue;
    }

    .column {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
    }

    .row {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-evenly;
    }

    .flex-1 {
        flex: 1
    }

    #app {
        font-family: "Noto Serif SC";
        height: 100%;
        width: calc(100vh*0.618);
        background-color: #fff;
    }

    #app>* {
        width: 100%;
    }

    .bar {
        z-index: 1;
        height: 4rem;
    }

    @media screen and (max-width: 600px) {
        #app {
            width: 100%;
        }
    }

    .card-outer {


        overflow: hidden;
        position: relative;
    }

    .card {
        user-select: none;
        background-color: #fff;
        z-index: 10;
        padding: 0 3%;
        width: calc(120vh*0.618*0.618);
        height: calc(120vh*0.618);
        max-height: 533px;
        max-width: 334px;
    }



    .background {
        top: 0;
        left: 0;
        filter: blur(2px);
        position: absolute;
        height: 100%;
        width: 100%;
    }

    .header {
        white-space: nowrap;
        width: 100%;
    }


    .header>div {
        display: inline-block;
        width: fit-content;
    }

    .date {
        line-height: 3rem;
        height: 3rem;
        font-size: 3rem;
        font-weight: bold;
    }

    .date {
        transform: translateY(0.8rem);
    }


    .split {
        margin: 0 0.3rem;
    }

    .logo {
        display: inline-block;
        height: 3rem;
    }

    .qrcode {
        display: inline-block;
        height: 2rem
    }

    .header {
        font-size: 0.8rem;
        text-align: center;
    }

    .down {
        transform: translateY(0.8rem);
    }



    .title {
        font-size: 2.7rem;
        writing-mode: vertical-lr;
    }

    .description {
        font-size: 1rem;
        padding: 0 0.2rem;
        margin: auto;
    }

    .picture {
        width: 100%;
        border-radius: 4px;
        max-height: 40vh;
    }

    .please {
        font-size: 0.7rem;
        min-height: 3.5rem;
    }

    .btn {
        user-select: none;
        padding: 0.5rem;
        font-size: 0.5rem;
        background-color: green;
        box-shadow: 0 8px 12px #ebedf0;
        color: #fff;
        border-radius: 4px;
    }

    .big {
        font-size: 1rem;
    }
</style>

<body class="row">

    <div id='app' class='column'>
        <img :src="imageURL" alt="">
        <div class="bar"></div>
        <div class="card-outer flex-1 column">
            <!-- 心语签的主要模板 -->
            <img class="background" :src='content.image'></img>
            <div class="card column" ref='card'>
                <div class="header">

                    <div class="date">{{ date.date }}</div>

                    <div class="split down">/</div>
                    <div class="month down">{{ date.months + 1 }}</div>
                    <div class="split down">/</div>
                    <div class="year down">{{ date.years }}</div>

                    <div class="down">{{ date.nongli }}</div>
                    <div class="down">{{ date.weekday }}</div>
                    <img class="logo" src="./static/logo.png"></img>
                    <img class="qrcode" src="./static/qrcode.png">
                    </img>
                </div>
                <div class="main row flex-1">
                    <div class="title">
                        <div v-for="(row, index) in Title" :key="index" class="row">
                            <span v-for="(word, index1) in row" :key="index1">{{
                                word
                                }}</span>
                        </div>
                    </div>
                    <div class="description">
                        {{ content.description }}
                    </div>
                </div>
                <img class="picture " :src="content.image" v-if="content.image">
                </img>


                <div class="please column">
                    {{ content.please || "" }}
                </div>

            </div>
            <!-- / 模板结束 -->
        </div>
        <div class="bar row">
            <div class="btn column" @click='save'>
                <div class="big">PNG</div>
                <div>下载</div>
            </div>
        </div>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.3.2/dist/html2canvas.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dayjs@1.10.7/dayjs.min.js"></script>
<script type='module'>

    import { chineseDate } from './lib/day.browser.js'
    import { calendar } from "./lib/calendar.js";
    // a 标签下载的方式貌似为同步模式（未验证）
    const aDownload = function (url, name) {
        const a = document.createElement('a');
        a.href = url
        a.download = name;
        a.click();
        URL.revokeObjectURL(a.href);
        a.remove();
        console.log('%c 下载完成', 'color:green');
    };

    new Vue({
        el: '#app',
        data() {
            return {
                processing: false,
                imageURL: "",
                content: {
                    title: '幸福\n二',
                    description: "幸福幸福幸福幸福幸福幸福幸福幸福\n幸福幸福幸福",
                    please: "幸福幸福幸福幸福幸福幸福",
                    image: "https://source.unsplash.com/random/600x300"
                }
            }
        },
        mounted() {

            const params = Object.fromEntries(new URL(window.location.href).searchParams)
            console.log(params)
            this.content = { ...this.content, ...params }
        },
        methods: {
            save() {
                console.log(this.$refs.card)
                const width = this.$refs.card.offsetWidth;
                const height = this.$refs.card.offsetHeight;
                this.processing = true
                html2canvas(this.$refs.card, {
                    useCORS: true,
                    scale: 4.0,
                    height, width,
                    scrollY: 0,
                    scrollX: 0,
                    logger: true,
                    allowTaint: false,
                }).then(canvas => {
                    //this.imageURL = canvas.toDataURL('image/png', 1.0)
                    canvas.toBlob((blob) => {
                        this.processing = false
                        const url = URL.createObjectURL(blob)

                        aDownload(url, `${this.content.title}.png`)
                    })
                })
            },
        },

        computed: {
            Title() {
                if (this.content && this.content.title) {
                    const result = this.content.title
                        .split("\n")
                        .map((i) => i.split(""));
                    console.log(result);
                    return result;
                } else {
                    return [];
                }
            },
            date() {
                if (!this.content) return {};
                let Time = new Date(this.content.date);
                if (isNaN(Time.getTime())) Time = new Date();
                const time = dayjs(Time);
                const date = time.toObject();
                const { IDayCn, IMonthCn } = calendar.solar2lunar(
                    date.years,
                    date.months + 1,
                    date.date
                );
                return {
                    ...date,
                    nongli: IMonthCn + IDayCn,
                    weekday: chineseDate.weekdaysShort[time.weekday()],
                };
            },
        },
    })
    console.log('渲染完成')
</script>

</html>